<template>
  <f7-page>
    <f7-navbar :title="`${title}${$t('m.upf1')}`" back-link=" "></f7-navbar>

    <div class="content-padding">
      <custom-input v-if="$f7route.query.type === '1'" type="password" :placeholder="$t('m.upf2')" v-model="formItems.old_pwd"></custom-input>
      <custom-input type="password" :placeholder="$t('m.upf3')" v-model="formItems.pwd1"></custom-input>
      <custom-input type="password" :placeholder="$t('m.upf4')" v-model="formItems.pwd2"></custom-input>
      <custom-input type="number" button :placeholder="$t('m.reg2')" v-model="formItems.code" :send-status="smsStatus" @send-sms="handleSendSms"></custom-input>
      <p><f7-link href="/forget-password/">请确认{{title}}密码</f7-link></p>
      <f7-button fill color="blue" large @click="handleUpdate">{{$t('m.save')}}</f7-button>
    </div>
  </f7-page>
</template>

<script>
  import { updatePassword } from "../api/my";
  import {sendPhoneCode} from "../api";

  export default {
    name: "update-pwd-form",
    data() {
      return {
        formItems: {
          old_pwd: '', //  原密码
          pwd1: '', //       新密码
          pwd2: '', //       确认密码
          code: ''
        },
        smsStatus: false
      }
    },
    computed: {
      title() {
        return this.$f7route.query.type === '1' ? this.$t('m.upf8') : this.$t('m.upf9')
      }
    },
    mounted() {
      console.log(this.$f7route)
    },
    methods: {
      handleSendSms() {
        sendPhoneCode({ phone: this.$store.getters.userInfo.user.phone, type: parseInt(this.$f7route.query.type) +4}).then(() => {
          this.smsStatus = true;
        })
      },
      handleUpdate() {
        let obj = {};
        if (this.$f7route.query.type === '2') {
          // obj['old_pwd'] = this.formItems.old_pwd;
          obj['twopwd1'] = this.formItems.pwd1;
          obj['twopwd2'] = this.formItems.pwd2;
          obj['code'] = this.formItems.code;
        } else {
          obj = this.formItems;
        }
        updatePassword(obj, this.$f7route.query.type).then(() => {
          this.$f7router.back();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding20;
    p {
      text-align: right;
      padding-bottom: $padding;
    }
    .custom-input {
      margin-bottom: $padding20;
    }
  }
</style>
